<template>
  <div class="menu">
    <el-card class="box-card menu-left">
      <template #header>
        <div class="card-header">
          <i
              class="el-icon-tickets title-icon"
          ></i>
          <span class="title-font">菜单列表</span>
        </div>
      </template>
      <el-input
          placeholder="菜单名称"
          v-model="filterText">
      </el-input>
      <div style="width: 100%" v-loading="loading">
        <el-tree
            ref="dataTree"
            :data="dataTree"
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :filter-node-method="filterNode"
            :expand-on-click-node="false">
          <template #default="{ node, data }">
        <span class="custom-tree-node" >
          <span>{{ data.name }}</span>
          <span  style="position: absolute;right: 0px">
           <inline-button  @click="add(data,node)"   icon="el-icon-plus" name="新增"></inline-button>
           <inline-button v-if="data.name != '根节点'" @click="edit(data,node)"   icon="el-icon-edit" name="编辑"></inline-button>
           <inline-button v-if="data.name != '根节点'" @click="del(data,node)"   is-del icon="el-icon-delete" name="删除"></inline-button>
          </span>
        </span>
          </template>
        </el-tree>
      </div>

    </el-card>
    <el-card class="box-card menu-right">
      <template #header>
        <div class="card-header">
          <i
              class="el-icon-edit-outline title-icon"
          ></i>
          <span class="title-font">菜单编辑</span>
        </div>
      </template>
      <div v-loading="loading">
        <menu-add-update-form @reload="init" ref="menuAddUpdateForm"></menu-add-update-form>
      </div>

    </el-card>
  </div>
</template>

<script>
import menuAddUpdateForm from './menu-add-update-form'
import VueUtil from "@/util/VueUtil";
import {NuoMenuController} from "@/actions/controller";
import InlineButton from "@/components/button/inline-button";
export default {
  name: "menu",
  components:{
    menuAddUpdateForm,
    InlineButton
  },
  mounted() {
    this.init()
  },
  data(){
    return{
      filterText:"",
      current: null,
      dataTree:[
        {
          name: '根节点',
          id: '0',
          children:[]
        }
      ],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.dataTree.filter(val);
    }
  },
  methods:{
     init(){
       this.loading = true
       VueUtil(this).ajax(NuoMenuController.queryMenuAll).then(res=>{
         this.dataTree[0].children = res.data
         this.loading = false
       }).catch(()=>{
         this.loading = false
       })
     },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    add(data){
       this.$refs.menuAddUpdateForm.init({
         pid: data.id,
         pidName: data.name
       })
    },
    edit(data){
      this.loading = true
      VueUtil(this).ajax(NuoMenuController.queryMenuById,{id : data.id}).then(res =>{
        this.$refs.menuAddUpdateForm.init(res.data)
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    async del(data) {
      await VueUtil(this).del("此操作将删除这个菜单以及子菜单", NuoMenuController.deleteMenuById, {id: data.id},()=>{
        this.init()
      });

    }
  }
}
</script>

<style scoped>

</style>
